import React, { useState, useEffect } from "react";
import { getCurrentInstance, useReachBottom } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
import { backgroundObj, loginData, toast } from '@/utils/utils'
import { goodsType_status } from '@/common/contant'
import Tabs from '@/components/Tabs'
import { fetchUserGoodsPackage, fakeChoosePackage } from '@/server/order';
import Mask from './components/Mask'
import "./index.scss";
const SelectedCourses = (props) => {
  const { params } = getCurrentInstance().router
  const { } = params
  const { organizationId = '1' } = loginData() || {}
  const [list, setList] = useState([])
  const [visible, setVisible] = useState(false)
  const [page, setPage] = useState({
    page: 1,
    limit: 10
  })
  const fetchData = () => {
    fetchUserGoodsPackage({ organizationId, ...page, status: activeKey }).then(e => {
      const { userGoodsPackageList = [], total } = e
      setList([...list, ...userGoodsPackageList])
    })
  }
  const fakeChoosePackageHandle = (list, count, id) => {
    if (list.length !== count) {
      return toast('请选择正确的商品数量')
    }
    else {
      const goodsIdList = []
      const skuIdList = []
      list.forEach(item => {
        if (item.skuId) {
          skuIdList.push(item.skuId)
        }
        else {
          goodsIdList.push(item.goodsId)
        }
      })
      fakeChoosePackage({ goodsIdList, skuIdList, id, organizationId }).then(e => {
        setPage(() => {
          setVisible(false)
          setList([])
          return {
            ...page,
            page: 1
          }
        })
      })

    }
  }
  const SelectedCard = (props) => {
    const { data } = props
    const { orderSn, packageGoodsType, packageGoodsInfo = '[]' } = data
    const listDesc = JSON.parse(packageGoodsInfo) || []
    return <View className="SelectedCard_box">
      <View className="SelectedCard_title">
        <View className="SelectedCard_title_left">订单号：{orderSn}</View>
        <View className="SelectedCard_title_right">{goodsType_status[packageGoodsType]}</View>
      </View>
      {listDesc.map((val, index) => {
        const { goodsName, cover = '', chooseFlag } = val
        return <View className="selectCard_list" key={index}>
          <View style={backgroundObj(cover.split(','))} className="selectCard_list_profile"></View>
          <View className="selectCard_list_goodsName">{goodsName}</View>
          {activeKey === '1' && <View className="chooseFlag_set">{chooseFlag === '1' ? '已领取' : '未领取'}</View>}
        </View>
      })}
      {activeKey === '0' ? <Button className="SelectedCard_getBtn" onClick={() => setVisible({ show: true, detail: data })} color='primary'>领取</Button> : null}
    </View>
  }
  const [activeKey, setActiveKey] = useState('0')
  const [tabs, setTabs] = useState([{
    label: '待选',
    value: '0'
  }, {
    label: '已选',
    value: '1'
  }])
  useEffect(() => {
    fetchData()
  }, [page])
  return (
    <View className="selectedCourses_box">
      <Tabs list={tabs} onChange={(e) => {
        setActiveKey(() => {
          setPage({
            ...page,
            page: 1
          })
          setList([])
          return e
        })
      }} activeKey={activeKey}>
      </Tabs>
      <View className="orderList_data">
        {list.map((item, index) => {
          return <SelectedCard data={item} key={index}></SelectedCard>
        })}
      </View>
      <Mask visible={visible} submit={fakeChoosePackageHandle} onClose={() => setVisible(false)}></Mask>
    </View>
  );
};
export default SelectedCourses

